<template>
    <div>
        <el-tabs class="demo-tabs">
            <el-tab-pane label="建议反馈">
                <el-form
                        ref="ruleFormRef"
                        :model="ruleForm"
                        status-icon
                        :rules="rules"
                        label-width="120px"
                        class="demo-ruleForm"
                >
                    <el-form-item label="反馈类型" prop="type">
                        <el-radio-group v-model="ruleForm.type">
                            <el-radio :label="'产品建议'">产品建议</el-radio>
                            <el-radio :label="'系统bug'">系统bug</el-radio>
                            <el-radio :label="'投诉'">投诉</el-radio>
                            <el-radio :label="'其他'">其他</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="反馈内容" prop="content">
                        <el-input
                                :rows="2"
                                type="textarea"
                                placeholder="请输入内容"
                                v-model="ruleForm.content"
                                autocomplete="off"
                        />
                    </el-form-item>
                    <el-form-item label="联系方式" prop="contact">
                        <el-input v-model.number="ruleForm.contact" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm(ruleFormRef)"
                        >提交</el-button
                        >
                        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>

    </div>
</template>

<script>
    import {ref,reactive,toRefs} from 'vue'
    import {basicFeedback} from "../../api/api";
    import {ElMessage} from "element-plus";

    export default {
        name: "AdviceFeedback",
        setup() {
            const ruleFormRef = ref(null)
            const data = reactive({
                ruleForm:{
                    type: '',
                    content: '',
                    contact: '',
                }
            })
            const validateType = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请选择反馈类型'))
                } else {
                    callback()
                }
            }
            const validateContent = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入反馈内容'))
                } else {
                    callback()
                }
            }
            const validateContact = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入联系方式'))
                } else {
                    callback()
                }
            }

            const rules = reactive({
                type: [{ validator: validateType, trigger: 'change' }],
                content: [{ validator: validateContent, trigger: 'blur' }],
                contact: [{ validator: validateContact, trigger: 'blur' }],
            })

            const submitForm = (formEl) => {
                if (!formEl) return
                formEl.validate((valid) => {
                    if (valid) {
                        data.ruleForm['contact'] = data.ruleForm['contact']+'';
                        basicFeedback(data.ruleForm).then(res => {
                            console.log(res);
                            ElMessage({type:'success',message:'反馈成功'})
                        }).catch(err =>{
                            ElMessage({type:'error',message:err.message})
                        })
                    } else {
                        console.log('error submit!')
                        return false
                    }
                })
            }

            const resetForm = (formEl) => {
                if (!formEl) return
                formEl.resetFields()
            }

            return {
                ...toRefs(data),
                ruleFormRef,
                rules,
                submitForm,
                resetForm
            }
        }
    }
</script>

<style scoped>

</style>
